<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
    <meta content='' name='description'>
    <meta content='Nils Nordman' name='author'>
    <link href='/images/howl.png' rel='shortcut icon'>
    <title>Howl :: Using multiple views</title>
    <link href="/stylesheets/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="/stylesheets/syntax.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="/stylesheets/howl.css" media="screen" rel="stylesheet" type="text/css" />
    <link href='//fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
  </head>
  <body class='doc doc_manual doc_manual_views'>
    <div class='container'>
      <div class='masthead'>
        <ul class='nav nav-pills'>
          <li>
            <a href='/'>
              <span class='glyphicon glyphicon-home'></span>
              Home
            </a>
          </li>
          <li>
            <a href='/doc/'>
              <span class='glyphicon glyphicon-book'></span>
              Documentation
            </a>
          </li>
          <li>
            <a href='/blog/'>
              <span class='glyphicon glyphicon-bullhorn'></span>
              Blog
            </a>
          </li>
          <li>
            <a href='/contact.html'>
              <span class='glyphicon glyphicon-inbox'></span>
              Contact
            </a>
          </li>
        </ul>
      </div>
      <ol class="breadcrumb"><li><a href="/">Home</a></li><li><a href='../'>Howl 0.3 Documentation</a></li><li>Manual</li><li>Using multiple views</li></ol>
      <h1 id="using-multiple-views">Using multiple views</h1>    <div class="toc">
      <div class="toc-title">
        <span>Using multiple views</span>
      </div>
      <div class="toc-entries">
<div class="toc-group">
<a href="#overview" class="toc-group-header overview">Overview</a>
</div>
<div class="toc-group">
<a href="#view-commands" class="toc-group-header view_commands">View commands</a>
<li class=""><a href="#creating-views">Creating views</a></li>
<li class=""><a href="#navigating-views">Navigating views</a></li>
<li class=""><a href="#manipulating-views">Manipulating views</a></li>
</div>
</div>
</div>
&#x000A;&#x000A;<h2 id="overview">Overview</h2>&#x000A;&#x000A;<p>When you start Howl, you&rsquo;ll be presented with one window, containing one editor&#x000A;view. Assuming there is sufficient screen estate to spare, it&rsquo;s often desirable&#x000A;to have multiple views open in the same window, which let&rsquo;s you view one or more&#x000A;buffers simultaneously. This is supported in Howl, where windows can contain an&#x000A;arbitrary number of views, arranged in a grid pattern.</p>&#x000A;&#x000A;<p><img alt="Multiple views" src="/images/doc/multi-views.png" /></p>&#x000A;&#x000A;<p>In the above picture you have two editors in the first row, each occupying one&#x000A;column each. In the bottom row you see one editor view occupying two columns.&#x000A;While the most you&rsquo;ll likely ever want is around two or three separate view, you&#x000A;can divide windows up in unreasonable ways should you so desire:</p>&#x000A;&#x000A;<p><img alt="Lots of views" src="/images/doc/lots-of-views.png" /></p>&#x000A;&#x000A;<p>There is currently no way to manually resize views; views are reflowed to fill&#x000A;the entire window, and will occupy the maximum amount of space available to&#x000A;them.</p>&#x000A;&#x000A;<h2 id="view-commands">View commands</h2>&#x000A;&#x000A;<p>Below is a list of some useful commands that work with views:</p>&#x000A;&#x000A;<h3 id="creating-views">Creating views</h3>&#x000A;&#x000A;<ul>&#x000A;<li><code>view-new-right-of</code>: Creates a new view, right of the current one.</li>&#x000A;<li><code>view-new-left-of</code>: Creates a new view, left of the current one.</li>&#x000A;<li><code>view-new-above</code>: Creates a new view, above the current one.</li>&#x000A;<li><code>view-new-below</code>: Creates a new view, below the current one.</li>&#x000A;</ul>&#x000A;&#x000A;<h3 id="navigating-views">Navigating views</h3>&#x000A;&#x000A;<ul>&#x000A;<li><code>view-left</code>: Moves focus to the view left of the current one.</li>&#x000A;<li><code>view-right</code>: Moves focus to the view right of the current one.</li>&#x000A;<li><code>view-up</code>: Moves focus to the view above the current one.</li>&#x000A;<li><code>view-down</code>: Moves focus to the view below the current one.</li>&#x000A;<li><code>view-next</code>: Moves focus to the next view in the grid. Bound to <code>ctrl_tab</code>&#x000A;in the default keymap.</li>&#x000A;</ul>&#x000A;&#x000A;<p>Each of the four directional commands above (view-left, view-right, view-up and&#x000A;view-down) have two additional companion commands:</p>&#x000A;&#x000A;<ul>&#x000A;<li><code>view-&lt;direction&gt;-wraparound</code></li>&#x000A;</ul>&#x000A;&#x000A;<p>These commands will wrap around the grid if no view could be found in the&#x000A;specified direction. The <em>view-right-wraparound</em> command for instance would go&#x000A;to the view to the right, should it exist. If not, it would go to first view in&#x000A;the next row should that exist, and to the first view of the first row if not.</p>&#x000A;&#x000A;<ul>&#x000A;<li><code>view-&lt;direction&gt;-or-create</code></li>&#x000A;</ul>&#x000A;&#x000A;<p>These will automatically create a new view in the specified direction, if&#x000A;necessary. For instance, the <em>view-right-or-create</em> command would go to the view&#x000A;to the right if there was a view to the right. Should no such view exist&#x000A;however, it would be created first. The last set of commands are bound to&#x000A;<code>shift_alt_left</code> + &lt;arrow key&gt; in the default keymap.</p>&#x000A;&#x000A;<h3 id="manipulating-views">Manipulating views</h3>&#x000A;&#x000A;<ul>&#x000A;<li><code>view-close</code>: Closes/removes the current view. Bound to <code>ctrl_w</code> in the&#x000A;default keymap.</li>&#x000A;</ul>&#x000A;&#x000A;<hr>&#x000A;&#x000A;<p><em>Next</em>: <a href="running_commands.html">Running external commands</a></p>
      <div class='footer text-muted'>
        <a href='/'>
          <img width="50" height="50" class="footer-logo" src="/images/howl.png" />
        </a>
        <div class='footer-follow'>
          <p>
            <a class='twitter-follow-button' data-lang='en' data-show-count='false' href='https://twitter.com/howleditor' rel='me'>
              Follow @howleditor
            </a>
          </p>
          <p>
            <a class='twitter-share-button' data-count='none' data-hashtags='howleditor' data-lang='en' data-text='The Howl Editor, a general purpose, light-weight customizable editor.' data-url='http://howl.io' href='https://twitter.com/share'>
              Tweet
            </a>
          </p>
        </div>
        <div class='footer-blurb'>
          <div>The Howl editor.</div>
          <div>
            Copyright 2012-2015
            <a class='alert-link' href='https://github.com/nilnor/howl/contributors'>
              The Howl Developers.
            </a>
          </div>
        </div>
      </div>
    </div>
    <script>
      <!-- / GA -->
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-45283282-1', 'howl.io');
      ga('send', 'pageview');
      <!-- / Twitter -->
      !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
      if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
      js.src="//platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    </script>
  </body>
</html>
